<template>
  <div id="selection-jxng">
    <header-top :option="headerOption"></header-top>
    <div class="jxng">
      <div class="jxng-top">
      <img :src="bannerPic">
        <div class="jxng-contentTitle" v-text="contentTitle"></div>
      </div>
      <div class="jxng-tip">
        <span class="jxng-tip-time">{{releaseTime}}</span>
        <span class="jxng-tip-writer">作者: <span class="jxng-tip-writer-span">{{authorName}}</span></span>
      </div>
      <hr>
      <div class="jxng-content" v-html="mainContent">
      </div>
      <div class="jxng-blank">
      </div>
      <div class="jxng-zuhex">
        <table class="jxng-zuhex-title" >
          <tr>
            <td><div class="jxng-zuhex-left"></div></td>
            <td>精选牛股</td>
          </tr>
        </table>
        <table class="jxng-zuhex-table">
          <tr>
            <td id="jxng-zuhex-td0" @click="jumpStock(0)" class="zhx-item" ><div class="div-kuang"><span class="span-gu">股</span><span class="jxng-span-name" >{{jxngName[0]}}</span><div class="jxng-div-code" v-text="jxngCode[0]"></div></div></td>
            <td id="jxng-zuhex-td1" @click="jumpStock(1)" class="zhx-item" ><div class="div-kuang"><span class="span-gu">股</span><span class="jxng-span-name" >{{jxngName[1]}}</span><div class="jxng-div-code" v-text="jxngCode[1]"></div></div></td>
            <td id="jxng-zuhex-td2" @click="jumpStock(2)" class="zhx-item" ><div class="div-kuang"><span class="span-gu">股</span><span class="jxng-span-name" >{{jxngName[2]}}</span><div class="jxng-div-code" v-text="jxngCode[2]"></div></div></td>
          </tr>
        </table>
      </div>
      <div class="jxng-bottom">
        <div class="jxng-bottom-line"></div>
        <div class="mianze">免责条款</div>
        <div class="bottom-tip">以上摘录、分析的内容不保证没有疏漏，只为投资者提供更多信息，并不构成任何投资建议或意见，据此操作，风险自负。</div>
      </div>
    </div>
  </div>
</template>

<script>
  import HeaderTop from 'components/HeaderTop'
  import Constant from 'common/constant'
  import RemoteDAO from 'common/remoteDAO'
  import LocalDAO from 'common/localDAO'
  import $ from 'jquery'
  import CommonUtil from 'common/common.util'

  export default {
    name: 'JXNG',
    data () {
      return {
        headerOption: {
          title: '精选牛股',
          leftBtn: Constant.leftBtn.BACK,
          operations: [Constant.operation.SHARE],
          page:Constant.page.JXNG,
          // shareurl: this.$route.query.templetContentUrl
          shareurl:"https://dl.app.gtja.com/nrng/share/share.jxng.html?templetContentUrl="+this.$route.query.templetContentUrl
        },
        userCode: '',
        nickname:'',
        bannerPic:'',
        authorName:'',
        releaseTime:'',
        contentTitle:'',
        mainContent:'',
        selectedStk:'',
        jxngName:[],
        jxngCode:[],
        jingxuanniuguURL:'',
        isLogin:''

      }
    },

    created: function () { // created里不直接写业务代码，统一调用methods里的方法
      this.initEvent()
    },

    components: {
      'header-top': HeaderTop
    },

    methods:{
      initEvent(){
        this.beforeRender(),
        this.getDate()
      },
      beforeRender(){
        this.nickName=LocalDAO.getNickname();
        if(this.nickName!="") this.userCode=LocalDAO.getUserCode();
      },
      getDate(){
        var self=this;
        var jxngUrl=window.location.href;
        this.jingxuanniuguURL=this.$route.query.templetContentUrl;
        $.ajax({
          async:true,
          url:self.jingxuanniuguURL,
            // url: "https://dl.app.gtja.com/operation/config/niurenniugu/templateContent/jingxuan/jingxuanniuguTempletContent.json",
          type: "GET",
          dataType: 'jsonp',
          jsonpCallback: "jingxuanContent",
          success: function (response) {
            self.jingxuanContent(response);
          },
          error: function(xhr,status){
          },
        });
        console.log("this.jingxuanniuguURL::",this.$route.query.templetContentUrl);
        console.log("shareurl:",this.headerOption.shareurl)
      },

      jingxuanContent(json){
          this.bannerPic=json.bannerPic;
          this.authorName=json.authorName;
          this.releaseTime=json.releaseTime;
          this.contentTitle=json.contentTitle;
          this.mainContent=json.mainContent;
          this.selectedStk=json.selectedStk;
          //内容换行
          if (this.mainContent.indexOf("\n")>= 0) {
            this.mainContent = this.mainContent.replace(/(\n(?=(\n+)))+/g,"<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
          }else {
            console.log("没有换行符");
          }
          var objStk=this.selectedStk.split(",");
          for(var i=0;i<3;i++){
            this.jxngName[i]=objStk[i].slice(9);
            this.jxngCode[i]=objStk[i].slice(0,8);
          }
        },

        jumpStock(i){
          var islogin="";
          if(this.nickName!=""){
            islogin="1";
          }else {
            islogin="0";
          }
          TDAPP.onEvent("10002","",{"usercode":this.userCode,"k2":this.jxngCode[i]});
          TDAPP.send();
          RemoteDAO.callStockLive(this.jxngCode[i],"ordinary",islogin);
        }

    }
  }
</script>


<style scoped>
  .jxng{
    width: 100%;
  }
  .jxng .jxng-top{
    position: relative;
  }
  .jxng .jxng-top img{
    width: 100%;
  }
  .jxng-contentTitle{
    position: absolute;
    text-align: center;
    font-size: 20px;
    color: #FFF;
    top: 20%;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin-left: 10px;
    margin-right: 10px;
    z-index: 99;
  }

  .jxng .jxng-tip{
    margin-top: 13px;
    margin-bottom: -10px;
    color: #999;
    font-size: 12px;
  }
  .jxng .jxng-tip-time{
    margin-left: 25px;
  }
  .jxng .jxng-tip-writer{
    float: right;
    margin-right: 25px;
  }
  .jxng .jxng-content{
    margin-top:-10px;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 20px;
    /*text-align: center;*/
    font-size: 16px;
    color: #565656;
    text-indent: 2em;
  }
  .jxng .jxng-blank{
    height: 11px;
    background-color: #F1F3F6;
  }
  .jxng .jxng-zuhex-title{
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 16px;
  }
  .jxng .jxng-zuhex-left{
    width: 4px;
    height: 13px;
    background-color: #31A7F1;
    margin-right: 5px;
  }
  .jxng .jxng-zuhex-table{
    width: 90%;
    text-align: center;
    margin-left: 4%;


    margin-bottom: 20px;
  }
  .jxng .jxng-zuhex-table td{
    padding-left: 2%;
  }
  .jxng .jxng-zuhex-table .div-kuang{
    border: solid 1px #E7E7E7;
    color: #565656;
    padding-top: 4px;
    padding-bottom: 4px;
    border-radius: 5px;
  }
  .jxng .jxng-zuhex-table .span-gu{
    border: solid 1px #3CBAEE;
    color: #3CBAEE;
    font-size:10px ;
    border-radius: 3px;
    margin-right: 2px;
    line-height: 10px;
    vertical-align: middle;

  }
  .jxng .jxng-span-name{
    color: #565656;
    font-size:16px ;
    line-height: 16px;
    vertical-align: middle;
  }
  .jxng .jxng-div-code{
    color:#999 ;
    font-size: 12px;
    margin-left: 10px;
  }
  .jxng .jxng-bottom{
    background-color:#E7E7E7 ;
    text-align: center;
    padding-top: 20px;
  }
  .jxng .jxng-bottom .mianze{
    width: 20%;
    height: 29px;
    font-size:15px ;
    color: #565656;
    margin-left: 40%;
    margin-bottom: 5px;
    margin-top: -10px;
    z-index: 999;
    background-color: #E7E7E7;
  }
  .jxng .jxng-bottom-line{
    background-color: #565656;
    width: 40%;
    margin-left: 30%;
    height: 1px;
    margin-top: 5px;
  }
  .jxng .jxng-bottom .bottom-tip{
    color:#565656 ;
    font-size: 12px;
    width: 88%;
    margin-left: 6%;
    padding-bottom: 18px;
  }

  /*share*/
  .jxngshare{
    padding-top: 0px !important;
  }
</style>
